<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgxVideogular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Open+Sans+Condensed:300" rel="stylesheet">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <span class="polygon polygon-red"></span>
  <span class="polygon polygon-yellow"></span>
  <span class="polygon polygon-blue"></span>

  <span class="header-decoration">
    <span class="header-detail header-detail--green"></span>
    <span class="header-detail header-detail--yellow"></span>
    <span class="header-detail header-detail--pink"></span>
    <span class="header-detail header-detail--blue"></span>
  </span>

  <header class="main-menu l-flex l-flex--center">
    <div class="l-inner l-flex l-flex--space-between">
      <ul class="menu">
        <li>
          <a class="menu--links" href="https://videogular.github.io/ngx-videogular/docs" target="_blank">
            Docs
          </a>
        </li>
        <li>
          <a class="menu--links" href="#demos">
            Demos
          </a>
        </li>
        <li>
          <a class="menu--links" href="https://github.com/videogular/ngx-videogular-showroom" target="_blank">
            Code Samples
          </a>
        </li>
      </ul>

      <ul class="menu icons">
        <li>
          <a class="menu--icons menu--icons__github" href="https://github.com/videogular/ngx-videogular"
            target="_blank"></a>
        </li>
        <li>
          <a class="menu--icons menu--icons__npm" href="https://www.npmjs.com/package/@videogular/ngx-videogular" target="_blank"></a>
        </li>
      </ul>
    </div>
  </header>

  <section class="hero l-flex l-flex--center">
    <div class="l-inner">
      <div>
        <h1 class="section-title logo">Videogular</h1>
        <h1 class="section-title">Futuristic Video Applications</h1>
        <p class="subtitle l-mw450">
          Videogular is a revolutionary framework built on top of <a href="https://angular.io"
            target="_blank">Angular</a>
          to develop highly interactive media apps for desktop and mobile
        </p>
      </div>

      <div class="l-mw400 l-flex l-flex--space-between">
        <a class="hero-button" href="https://videogular.github.io/ngx-videogular/docs/getting-started" target="_blank">Get Started</a>
        <a class="hero-button" href="https://github.com/videogular/ngx-videogular" target="_blank">Github</a>
      </div>
    </div>

    <video class="video-bg" src="http://static.videogular.com/assets/videos/videogular-bg.mp4" autoplay muted loop>
    </video>
  </section>

  <section class="logos-container l-flex l-flex--center">
    <ul class="logos l-inner l-flex l-flex--space-between l-flex--center">
      <li><img class="logo-img" src="assets/nbc.png" alt="NBC"></li>
      <li><img class="logo-img" src="assets/vmware.png" alt="VMware"></li>
      <li><img class="logo-img" src="assets/cisco.png" alt="Cisco"></li>
      <li><img class="logo-img" src="assets/mercedes-benz.png" alt="Mercedes-Benz"></li>
      <li><img class="logo-img" src="assets/microsoft.png" alt="Microsoft"></li>
      <li><img class="logo-img" src="assets/discovery.png" alt="Discovery"></li>
    </ul>
  </section>

  <article class="intro l-inner l-flex l-flex--space-between" id="demos">
    <ngx-videogular-root></ngx-videogular-root>
  </article>

  <article class="core-features l-inner l-mt100">
    <h2 class="section-title">Core Features</h2>
    <section class="core-features-container l-flex">
      <div class="core-features-image"></div>

      <ul class="core-features-list">
        <li>
          <input type="radio" name="core-features" id="multi-cam" checked>
          <div class="core-features-item">
            <label for="multi-cam" class="core-features-label">
              Multi-cam
            </label>
            <p class="core-features-description">
              Videogular has <a href="https://videogular.github.io/ngx-videogular-showroom/#/master-player"
                target="_blank">built-in multi-cam support</a>
              by default. Attach several media elementss inside your player and control them simultaneously or
              individually. You can even synchronize all medias and is accurate to a millisecond precision.
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="cue-points">
          <div class="core-features-item">
            <label for="cue-points" class="core-features-label">
              Cue points
            </label>
            <p class="core-features-description">
              <a href="https://videogular.github.io/ngx-videogular-showroom/#/cue-points-player" target="_blank">Control
                your text tracks</a>
              dynamically. Create, edit and remove text tracks and cue points easily with bindings.
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="reactive">
          <div class="core-features-item">
            <label for="reactive" class="core-features-label">
              Reactive
            </label>
            <p class="core-features-description">
              Videogular's API is built on top of <a href="https://github.com/Reactive-Extensions/RxJS"
                target="_blank">RxJS</a>
              so you can listen to changes on the media player reactively.
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="extensible">
          <div class="core-features-item">
            <label for="extensible" class="core-features-label">
              Extensible
            </label>
            <p class="core-features-description">
              Create your own plugins using the Videogular API. Extend the player with your custom elements.
              Change the skin with plain CSS. And don’t forget to check our <a
                href="https://videogular.github.io/ngx-videogular/docs" target="_blank">official modules</a>.
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="play-anything">
          <div class="core-features-item">
            <label for="play-anything" class="core-features-label">
              Play anything
            </label>
            <p class="core-features-description">
              With Videogular you can <a href="https://videogular.github.io/ngx-videogular-showroom/#/custom-media"
                target="_blank">play
                literally anything</a>. Thanks to our API you can create your own media elements to play maps,
              <a href="https://videogular.github.io/ngx-videogular-showroom/#/custom-media" target="_blank">SVG/CSS
                animations</a>, slides, VR, etc... And still use the same controls. The possibilities are
              endless!
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="drm">
          <div class="core-features-item">
            <label for="drm" class="core-features-label">
              Streaming with DRM
            </label>
            <p class="core-features-description">
              Stream your media files with <a
                href="https://videogular.github.io/ngx-videogular-showroom/#/streaming-player" target="_blank">DASH
                or HLS and protect your content</a> with our DRM support for
              Widevine and PlayReady. Live streaming is also available and you can even combine mixed
              playlists with both technologies!
            </p>
          </div>
        </li>
        <li>
          <input type="radio" name="core-features" id="aria">
          <div class="core-features-item">
            <label for="aria" class="core-features-label">
              WAI-ARIA support
            </label>
            <p class="core-features-description">
              Videogular has out-of-the-box <a href="https://www.w3.org/WAI/intro/aria" target="_blank">WAI-ARIA</a>
              support for all buttons like play/pause, mute, fullscreen and more, but also for other components
              like track selector, volume, scrub bar and so on.
            </p>
          </div>
        </li>
      </ul>
    </section>
  </article>

  <article class="get-started l-inner l-flex l-flex--space-between l-mt100">
    <section class="get-started-title">
      <h2 class="section-title">Get started now</h2>
      <p>Start building the future of video applications!</p>
    </section>
    <section class="get-started-logos-container">
      <ul class="get-started-logos">
        <li class="get-started-logo">
          <a href="https://videogular.github.io/ngx-videogular/docs" target="_blank">
            <img src="assets/logo_docs@2x.png">
          </a>
          <h3>DOCS</h3>
        </li>
        <li class="get-started-logo">
          <a href="https://github.com/videogular/ngx-videogular" target="_blank">
            <img src="assets/logo_github@2x.png">
          </a>
          <h3>GITHUB</h3>
        </li>
        <li class="get-started-logo">
          <a href="https://www.npmjs.com/package/@videogular/ngx-videogular" target="_blank">
            <img src="assets/logo_npm@2x.png">
          </a>
          <h3>NPM</h3>
        </li>
      </ul>
    </section>
  </article>

  <span class="header-decoration header-decoration--h15">
    <span class="header-detail header-detail--green"></span>
    <span class="header-detail header-detail--yellow"></span>
    <span class="header-detail header-detail--pink"></span>
    <span class="header-detail header-detail--blue"></span>
  </span>

  <footer>
    <section class="l-inner l-flex">
      <span class="credits">
        This project was created and is maintained by the amazing <a href="https://github.com/videogular"
          target="_blank">Videogular Team</a>.
        Design by <a href="http://eyegraphic.net/" target="_blank">Eyegraphic</a>,
        video by <a href="https://vimeo.com/38708088" target="_blank">Fabien Bouchard</a>,
        voice by <a href="https://en.wikipedia.org/wiki/Pale_Blue_Dot" target="_blank">Carl Sagan</a> and
        music by <a
          href="https://audiojungle.net/item/inspirational-piano/5900498?ref=ilovemedia-es&clickthrough_id=1059738821&redirect_back=true"
          target="_blank">Raquel G. Cabañas.</a>
      </span>
    </section>
  </footer>
</body>
</html>
